<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>绘制可旋转的点</title>
</head>
<style>
    html,body,#container {
        width: 80%;
        height: 90%;
        margin: 0px;
    }
    #loadingTip {
        position: absolute;
        z-index: 9999;
        top: 0;
        right: 0;
        padding: 3px 10px;
        background: red;
        color: #fff;
        font-size: 13px;
    }
</style>
<script type="text/javascript" src="zepto.js"></script>
<script type="text/javascript" src='https://webapi.amap.com/maps?v=1.3&key=9a621a769237615e36fe158651cc8e1f'></script>
<script src="https://webapi.amap.com/ui/1.0/main.js"></script>
<body>
	 <div id="container"></div>
	 <button id="setd">设置绘制绘制角度</button>
    <button id="two">二次改数据</button>
	 <script type="text/javascript">
	 	var provinces = [{
			"name": "广东省",
			"center": "113.280637,23.125178",
			"type": 1,
			"subDistricts": [],
			id:"a",
			jd:"80"
		}, {
			"name": "山西省",
			"center": "112.549248,37.857014",
			"type": 1,
			"subDistricts": [],
			id:"b",
			jd:"70"
		}, {
			"name": "辽宁省",
			"center": "123.429096,41.796767",
			"type": 1,
			"subDistricts": [],
			id:"c",
			jd:"20"
		}];

		var provinces2 = [{
			"name": "黑龙江省",
			"center": "126.642464,45.756967",
			"type": 1,
			"subDistricts": [],
			id:"g",
			jd:"100"
		}, {
			"name": "上海市",
			"center": "121.472644,31.231706",
			"type": 1,
			"subDistricts": [],
			id:"f",
			jd:"150"
		}, {
			"name": "安徽省",
			"center": "117.283042,31.86119",
			"type": 1,
			"subDistricts": [],
			id:"j",
			jd:"80"
		}];
		 //创建地图
	    var map = new AMap.Map('container');
		var arr={};
        //绘制海量点
        AMapUI.load(['ui/misc/PointSimplifier', 'lib/$'], function(PointSimplifier, $) {
        	  //判断Canvas
	           if (!PointSimplifier.supportCanvas) {
	               alert('当前环境不支持 Canvas！');
	               return;
	           }
               
               //绘制海量点实例化对象
	           
				var pointSimplifierIns = new PointSimplifier({
					map: map, //所属的地图实例
					getPosition: function(item) {
						if (!item) {
							return null;
						}
						//var parts = item.split(',');
						//返回经纬度
						return item;
					},
					getHoverTitle: function(dataItem, idx) {
						console.log(dataItem,222)
						return idx + ': ' + dataItem;
					},
					renderConstructor: PointSimplifier.Render.Canvas.GroupStyleRender,
					renderOptions: {
		                getGroupId: function(item, idx) {
		                	
		                    return item[2].id;
		                },
		                groupStyleOptions: function(gid) {

		                    console.log(gid,44444444444)
		                    return {
		                        pointStyle:{
		                        	 content: function(ctx, x, y, width, height) {

				                        //注意，这里的width和height可能不同于pointStyle里面的width/height， 高清屏幕下会存在比例缩放

				                        //这里绘制一个圆顶锥形
				                        //ctx.beginPath();
				                        //ctx.save()
				                        
				                        var a=0;//旋转角度
				                        //旋转前
				                        var x1_0=x;
				                        var y1_0=y-22;

				                        var x2_0=x;
				                        var y2_0=y-11;

				                        var x3_0=x+6;
				                        var y3_0=y+8;

				                        var x4_0=x-6;
				                        var y4_0=y+8;
				                        // x0= (x - rx0)*cos(a) - (y - ry0)*sin(a) + rx0 ;    
				                        // y0= (x - rx0)*sin(a) + (y - ry0)*cos(a) + ry0 ;
				                        //旋转后
				                        var x1_1=(x1_0-x)*Math.cos(a*Math.PI/180)-(y1_0-y)*Math.sin(a*Math.PI/180) + x;
				                        var y1_1=(x1_0-x)*Math.sin(a*Math.PI/180)+(y1_0-y)*Math.cos(a*Math.PI/180) + y ;

				                        var x2_1=(x2_0-x)*Math.cos(a*Math.PI/180)-(y2_0-y)*Math.sin(a*Math.PI/180) + x;
				                        var y2_1=(x2_0-x)*Math.sin(a*Math.PI/180)+(y2_0-y)*Math.cos(a*Math.PI/180)+ y ;

				                        var x3_1=(x3_0-x)*Math.cos(a*Math.PI/180)-(y3_0-y)*Math.sin(a*Math.PI/180) + x;
				                        var y3_1=(x3_0-x)*Math.sin(a*Math.PI/180)+(y3_0-y)*Math.cos(a*Math.PI/180)+ y ;

				                        var x4_1=(x4_0-x)*Math.cos(a*Math.PI/180)-(y4_0-y)*Math.sin(a*Math.PI/180) + x;
				                        var y4_1=(x4_0-x)*Math.sin(a*Math.PI/180)+(y4_0-y)*Math.cos(a*Math.PI/180)+ y ;
				                        
				                        //ctx.restore()
										ctx.moveTo(x1_1, y1_1);
				                        ctx.lineTo(x2_1, y2_1);
				                        ctx.lineTo(x3_1, y3_1);
				                        ctx.lineTo(x4_1, y4_1);
				                        ctx.lineTo(x2_1, y2_1);
		  								
				                    },
				                    //宽度
				                    width: 20,
				                    //高度
				                    height: 20,
				                    offset: ['0', '0'],
				                    fillStyle: '#316395',
				                    lineWidth: 1,
				                    strokeStyle: '#000000'
		                        } 		                   
				                   
		                    };
		                }
					}
				});
				

               //暴露全局
	           window.pointSimplifierIns = pointSimplifierIns;

               //事件的添加
	           pointSimplifierIns.on('pointClick', function(e, record) {
	           		alert(000000)
				   
	           });
			   
			   
			   

				var data1_posi=[];
		
				for(var i=0;i<provinces.length;i++){

					data1_posi[i]=[];
					data1_posi[i][0]=provinces[i].center.split(",")[0];
					data1_posi[i][1]=provinces[i].center.split(",")[1];
					data1_posi[i][2]={id:provinces[i].id,jd:provinces[i].jd};
				}
			
			
				
				arr={};
				for(var i=0;i<data1_posi.length;i++){
					arr[data1_posi[i][2].id]=data1_posi[i][2].jd;
				};
	           pointSimplifierIns.setData(data1_posi);
	
			   
			    map.setZoom(4);
				map.setFitView();


				//点击修改样式
				$("#setd").click(function(){

					
					aaaaaa();

				});
				function aaaaaa(){
					var renderOptions = pointSimplifierIns.getRenderOptions();
 					console.log(renderOptions,5555555)
            		renderOptions.groupStyleOptions=function(gid) {

		                    console.log(gid,222222222)
		                    return {
		                        pointStyle:{
		                        	 content: function(ctx, x, y, width, height) {

				                        //注意，这里的width和height可能不同于pointStyle里面的width/height， 高清屏幕下会存在比例缩放

				                        //这里绘制一个圆顶锥形
				                        //ctx.beginPath();
				                        //ctx.save()
				                        
				                        var a=arr[gid];//旋转角度
				                        //旋转前
				                        var x1_0=x;
				                        var y1_0=y-22;

				                        var x2_0=x;
				                        var y2_0=y-11;

				                        var x3_0=x+6;
				                        var y3_0=y+8;

				                        var x4_0=x-6;
				                        var y4_0=y+8;
				                        // x0= (x - rx0)*cos(a) - (y - ry0)*sin(a) + rx0 ;    
				                        // y0= (x - rx0)*sin(a) + (y - ry0)*cos(a) + ry0 ;
				                        //旋转后
				                        var x1_1=(x1_0-x)*Math.cos(a*Math.PI/180)-(y1_0-y)*Math.sin(a*Math.PI/180) + x;
				                        var y1_1=(x1_0-x)*Math.sin(a*Math.PI/180)+(y1_0-y)*Math.cos(a*Math.PI/180) + y ;

				                        var x2_1=(x2_0-x)*Math.cos(a*Math.PI/180)-(y2_0-y)*Math.sin(a*Math.PI/180) + x;
				                        var y2_1=(x2_0-x)*Math.sin(a*Math.PI/180)+(y2_0-y)*Math.cos(a*Math.PI/180)+ y ;

				                        var x3_1=(x3_0-x)*Math.cos(a*Math.PI/180)-(y3_0-y)*Math.sin(a*Math.PI/180) + x;
				                        var y3_1=(x3_0-x)*Math.sin(a*Math.PI/180)+(y3_0-y)*Math.cos(a*Math.PI/180)+ y ;

				                        var x4_1=(x4_0-x)*Math.cos(a*Math.PI/180)-(y4_0-y)*Math.sin(a*Math.PI/180) + x;
				                        var y4_1=(x4_0-x)*Math.sin(a*Math.PI/180)+(y4_0-y)*Math.cos(a*Math.PI/180)+ y ;
				                        
				                        //ctx.restore()
										ctx.moveTo(x1_1, y1_1);
				                        ctx.lineTo(x2_1, y2_1);
				                        ctx.lineTo(x3_1, y3_1);
				                        ctx.lineTo(x4_1, y4_1);
				                        ctx.lineTo(x2_1, y2_1);
		  								
				                    },
				                    //宽度
				                    width: 20,
				                    //高度
				                    height: 20,
				                    offset: ['0', '0'],
				                    fillStyle: '#316395',
				                    lineWidth: 1,
				                    strokeStyle: '#000000'
		                        } 		                   
				                   
		                    };
		                };
            		//重新绘制
                	pointSimplifierIns.render();
	                //set data
		   //          pointSimplifierIns.setData(data1_posi);
		   //          map.setZoom(4);
					// map.setFitView();
				};
				//二次改数据

				$("#two").click(function(){
					var data1_posi2=[];
			
					for(var i=0;i<provinces2.length;i++){

						data1_posi2[i]=[];
						data1_posi2[i][0]=provinces2[i].center.split(",")[0];
						data1_posi2[i][1]=provinces2[i].center.split(",")[1];
						data1_posi2[i][2]={id:provinces2[i].id,jd:provinces2[i].jd};
					}
				
				
					
					arr={};
					for(var i=0;i<data1_posi2.length;i++){
						arr[data1_posi2[i][2].id]=data1_posi2[i][2].jd;
					};
		            pointSimplifierIns.setData(data1_posi2);
		            map.setZoom(4);
					map.setFitView();
					aaaaaa();
				});

        });
	
			


	 </script>
</body>
</html>